<template>
	<view class="mode-of-payment">
		<view class="msg rbox box_x_center">
			请在<countdown :startTime="startTime" :endTime="enTime" />秒内完成支付，超时订单自动取消
		</view>
		<view class="pay-list cbox">
			<view class="item rbox box_center">请选择支付方式</view>
			<view :class="['item', 'rbox', 'box_center', {active: oIndex == idx}]" v-for="(item,idx) in payList" :key="idx" @tap="changeIdx(idx)">
				<image class="icon" :src="item.img" mode="aspectFill"></image>
				<text class="name">{{item.name}}</text>
			</view>
		</view>
		
		<view class="user-info cbox " v-if="oIndex == 2">
			<text class="tit rbox box_x_center">收款信息</text>
			<view class="list cbox box_y_start">
				<view class="item rbox">
					<text class="title rbox box_x_end">收款单位：</text>
					<text class="info">北京市农林科学院植物保护环境保护研究所</text>
				</view>
				<view class="item rbox box_x_end">
					<text class="title rbox">开户行：</text>
					<text class="info">工商银行紫竹院支行</text>
				</view>
				<view class="item rbox box_x_end">
					<text class="title rbox">银行账号：</text>
					<text class="info">9558850200000729884</text>
				</view>
			</view>
		</view>
		
		<view class="pay-wrap" v-if="oIndex!=2">
			<text class="tip rbox box_x_center">（填写单号请到个人界面-我的送检）</text>
			<view class="btn-wrapper rbox box_y_center box_space_b">
				<view class="pay-info">
					需支付：<text>1000</text>元
				</view>
				<view class="btn">立即支付</view>
			</view>
		</view>
		
		<view class="single-btn btn-normal rbox box_center btn-position" v-else @tap="goPage('paymentVoucher')">填写支付凭证</view>
	</view>
</template>

<script>
	import countdown from "@/components/cz-countdown/cz-countdown.vue"
	export default {
		data() {
			return {
				startTime:'2020-01-01 00:00:00',
				enTime:'2020-01-02 00:00:00',
				oIndex: 3,
				payList: [
					{img: '/static/icon01.png', name: '微信支付'},
					{img: '/static/icon02.png', name: '支付宝支付'},
					{img: '/static/icon03.png', name: '线下打款'}
				]
			}
		},
		components: {
			countdown
		},
		methods: {
			goPage(url) {
				wx.navigateTo({
					url: `/pages/${url}/${url}`
				})
			},
			changeIdx(idx) {
				this.oIndex = idx
			}
		}
	}
</script>

<style lang="scss" scoped>
.mode-of-payment {
	min-height: 100vh;
	background-color: #f7f7f7;
	.msg {
		padding: 10rpx 0;
		font-size: 26rpx;
		line-height: 1;
		color: #f00;
		background-color: #FFFEE4;
	}
	.user-info {
		margin-top: 78rpx;
		.tit {
			font-size: 36rpx;
			line-height: 1;
		}
		.list {
			padding: 0 100rpx;
			margin-top: 44rpx;
			.item {
				margin-bottom: 20rpx;
				.title {
					min-width: 5em;
					font-size: 28rpx;
					line-height: 1;
					color: #A2A2A2;
				}
				.info {
					font-size: 28rpx;
					line-height: 1.4;
					color: #666;
				}
			}
		}
	}
	.pay-list {
		.item {
			margin-bottom: 4rpx;
			padding: 28rpx 0;
			font-size: 32rpx;
			line-height: 1;
			color: #7B7B7B;
			background-color: #fff;
			&.active {
				background-color: #1DE1C3;
				.name {
					color: #fff;
				}
			}
			.icon {
				margin-right: 36rpx;
				width: 48rpx;
				height: 48rpx;
			}
			.name {
				font-size: 32rpx;
				line-height: 1;
				min-width: 5em;
			}
		}
	}
	.pay-wrap {
		position: absolute;
		bottom: 76rpx;
		left: 50%;
		transform: translateX(-50%);
		padding: 0 46rpx;
		width: 100vw;
		.tip {
			margin-bottom: 126rpx;
			font-size: 24rpx;
			line-height: 1;
			color: #6D6D6D;
		}
		.btn-wrapper {
			padding-left: 38rpx;
			background-color: #fff;
			border: 1px solid #1DE1C3;
			box-shadow: 0px 0px 6rpx rgba(0, 0, 0, 0.16);
			border-radius: 42rpx;
			.pay-info {
				font-size: 32rpx;
				line-height: 1;
				color: #8A8A8A;
				text {
					font-size: 44rpx;
					line-height: 1;
					color: #f00;
				}
			}
			.btn {
				padding: 18rpx 82rpx;
				font-size: 34rpx;
				line-height: 1;
				color: #fff;
				background-color: #1DE1C3;
				border-radius: 42rpx;
			}
		}
	}
}

</style>
